<template>
    <div class="center" @dragenter="handleDragOver" @dragover="handleDragOver" @drop="handleDrop">
       <Canvas /> 
    </div>
</template>

<script lang="ts" setup>
import useEditorStore from '@/store/modules/editor';
import { createComponentConfig, componentInstall,configComponentInstall } from '@/materials';
import Canvas from "./components/canvas/index.vue";

defineOptions({
    name: "Center",
});
const handleDragOver = (event: DragEvent) => {
    event.preventDefault();
}

const editorStore = useEditorStore();

const handleDrop = async (event: DragEvent) => {
    const data = event.dataTransfer!.getData("application/json");
    if (!data) return;
    const config = JSON.parse(data);
    const componentConfig = await createComponentConfig(config);
    await componentInstall(config);
    await configComponentInstall(config);
    editorStore.addComponent(componentConfig);
    editorStore.setCurrentComponentId(componentConfig.id);
}
</script>

<style scoped lang="scss">
.center {
    background-color: #fff;
    height:100%;
}
</style>